<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Hover on grid(border)</title>

	<!-- Link *** CSS  -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/foundation/6.2.0/foundation.min.css">
	<link rel="stylesheet" href="//demo.lanrenzhijia.com/2014/owl0509/assets/js/highlight/styles/monokai_sublime.css">
	<link rel="stylesheet" href="//demo.lanrenzhijia.com/2014/owl0509/assets/css/demo.css">
	<link rel="stylesheet" href="//demo.lanrenzhijia.com/2014/owl0509/assets/css/devices.css">

	<!-- Link Demo *** CSS  -->
	<link rel="stylesheet" href="grid-border.css">

</head>
<body>
<div id="devices-container">

	<div class="devices-buttons clearfix">
		<a class="desktop-icon active" data-device="desktop">
			<span class="desktop-icon-foot"></span>
		</a>
		<a class="tablet-icon" data-device="tablet">
			<span class="tablet-icon-button"></span>
		</a>
		<a class="mobile-icon" data-device="mobile">
			<span class="mobile-icon-button"></span>
		</a>
	</div>


	<div id="devices" class="desktop">
		<div class="frame-outer">
			<div class="camera"></div>
			<div class="mic"></div>
			<div class="screen" style="overflow: scroll;">
				<div class="folder">
					<p>Trying of mine (NoN - Box sizing)</p>

					<div class="first" style="width: 100%;">
						<p> Border : 实现边框效果（margin平移）</p>

						<div class="grid-border">
							<div class="grid-row">
								<div class="grid-column"><span>1</span></div>
								<div class="grid-column"><span>2</span></div>
								<div class="grid-column"><span>3</span></div>
								<div class="grid-column"><span>4</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>5</span></div>
								<div class="grid-column"><span>6</span></div>
								<div class="grid-column"><span>7</span></div>
								<div class="grid-column"><span>8</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>9</span></div>
								<div class="grid-column"><span>10</span></div>
								<div class="grid-column"><span>11</span></div>
								<div class="grid-column"><span>12</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>13</span></div>
								<div class="grid-column"><span>14</span></div>
								<div class="grid-column"><span>15</span></div>
								<div class="grid-column"><span>16</span></div>
							</div>
						</div>
					</div>

					<div class="second" style="width: 100%;">
						<p>Padding ：实现边框效果（margin平移）</p>

						<div class="grid-padding">
							<div class="grid-row">
								<div class="grid-column"><span>1</span></div>
								<div class="grid-column"><span>2</span></div>
								<div class="grid-column"><span>3</span></div>
								<div class="grid-column"><span>4</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>5</span></div>
								<div class="grid-column"><span>6</span></div>
								<div class="grid-column"><span>7</span></div>
								<div class="grid-column"><span>8</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>9</span></div>
								<div class="grid-column"><span>10</span></div>
								<div class="grid-column"><span>11</span></div>
								<div class="grid-column"><span>12</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>13</span></div>
								<div class="grid-column"><span>14</span></div>
								<div class="grid-column"><span>15</span></div>
								<div class="grid-column"><span>16</span></div>
							</div>
						</div>
					</div>
				</div>
				<br>
				<div class="folder">
					<p>Others method: <b>non box-sizing</b></p>
					<div class="wrap">
						<div class="item">1</div>
						<div class="item">2</div>
						<div class="item">3</div>
						<div class="item">4</div>
						<div class="item">5</div>
						<div class="item">6</div>
						<div class="item">7</div>
						<div class="item">8</div>
						<div class="item">9</div>
					</div>
					<br>
					<p>Others method: <b>box-sizing</b></p>
					<div class="wrap box">
						<div class="item">1</div>
						<div class="item">2</div>
						<div class="item">3</div>
						<div class="item">4</div>
						<div class="item">5</div>
						<div class="item">6</div>
						<div class="item">7</div>
						<div class="item">8</div>
						<div class="item">9</div>
					</div>
				</div>
			</div>
		</div>
		<div class="screen-bottom">
			<div class="owl-desktop-logo">Hover on grid(border)</div>
			<div class="push">
				<div class="square"></div>
			</div>
		</div>
		<div class="footer-container">
			<div class="foot"></div>
			<div class="foot-shadow-top"></div>
			<div class="foot-bottom"></div>
		</div>
	</div>
</div>

<!-- Script *** JS -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//demo.lanrenzhijia.com/2014/owl0509/assets/js/highlight/highlight.pack.js"></script>
<script src="//demo.lanrenzhijia.com/2014/owl0509/assets/js/app.js"></script>
<script src="//demo.lanrenzhijia.com/2014/owl0509/assets/js/devices.demo.js"></script>

<!-- Script Demo *** JS -->
<script src=""></script>

<script>
	$(document).ready(function ()
	{

	})
</script>
</body>
</html>